<template>
  <div class="login-page">
    <div class="vd">
      <video
        src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4"
        autoplay="autoplay"
        playsinline
        loop="loop"
        muted="muted"
      ></video>
    </div>
    <el-card>
      <div class="avatar-box">
        <img
          src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"
          alt=""
        />
      </div>
      <el-form :model="form" :rules="rules" ref="form">
        <el-form-item prop="account">
          <el-input
            v-model="form.account"
            placeholder="账号"
            prefix-icon="el-icon-user-solid"
          ></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="form.password"
            placeholder="密码"
            prefix-icon="el-icon-lock"
            :show-password="true"
          ></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model="form.code"
            placeholder="验证码"
            prefix-icon="el-icon-s-claim"
          >
            <template #suffix>
              <img :src="iconUrl" alt="" @click="getNumber" />
            </template>
          </el-input>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="loginFn">登录</el-button>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getNumberApi, loginApi } from "@/api/login";

export default {
  name: "LoginPage",
  data() {
    return {
      iconUrl: "",
      form: {
        account: "shenlingadmin",
        password: "123456",
        code: "",
        // key必须有初始值，否则报错
        key: "2234234234",
      },
      rules: {
        account: [{ required: true, message: "不能为空" }],
        password: [{ required: true, message: "不能为空" }],
        code: [{ required: true, message: "不能为空" }],
      },
    };
  },
  created() {
    this.getNumber();
  },
  methods: {
    async getNumber() {
      // 生成随机数
      const number =
        "abcdefghijklmnopqrstuvwxzyABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      const random = number
        .split("")
        .sort(() => Math.random() - 0.5)
        .slice(0, 20)
        .join("");
      // console.log(random);
      this.form.key = random;
      // 调接口 传key 返回验证码图片
      const res = await getNumberApi({
        key: this.form.key,
      });
      // console.log(res);
      // 对返回的blob进行格式转换，使其变成可识别的图片路径
      let blob = new Blob([res], { type: "application/vnd.ms-excel" });
      let url = window.URL.createObjectURL(blob);
      this.iconUrl = url;
      // console.log(this.iconUrl);
    },
    async loginFn() {
      // console.log(111);
      await this.$refs.form.validate();
      try {
        const res = await loginApi(this.form);
        console.log(res);
        this.$store.commit("user/updateUserInfo", res.data.user);
        this.getNumber();
        if (res.msg === "ok") {
          await this.$message.success("登录成功");
          this.$store.commit("user/updateToken", res.data.token.token);
          await this.$router.push("/");
        } else {
          this.$message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.login-page {
  height: 100vh;
  position: relative;
  .el-card {
    background-color: white;
    width: 450px;
    height: 467px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    ::v-deep .avatar-box {
      width: 195px;
      height: 54px;
      display: flex;
      margin: 10px 100px 15px;
      justify-content: center;
      img {
        width: 100%;
        height: 54px;
      }
    }

    .el-form {
      bottom: 0;
      width: 100%;
      box-sizing: border-box;
      padding: 30px 20px;
      border-radius: 10px;
      ::v-deep .el-input__inner {
        height: 50px;
      }
      .el-button {
        width: 100%;
        margin-top: 22px;
        font-size: 18px;
        height: 54px;
        font-weight: bold;
      }
    }
  }
}
.vd {
  //z-index: -100;
  width: 100%;
  height: 100%;
  //此处不设置固定定位，背景视频尺寸过大，会有进度条可以拉动
  position: fixed;
  video {
    display: inline-block;
    object-fit: fill;
  }
}
img {
  margin-top: 4px;
}
</style>
